<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./icon/iconfont.css" />
    <style>
        body {
            background-color: #000;
            color: #fff;
            margin: 0;
            padding: 0;
        }

        .swiper-container {
            position: relative;
        }

        .swiper-wrapper {
            display: flex;
        }

        .swiper-slide {
            width: 100%;
            flex-shrink: 0;
            height:500px;
            overflow: hidden;
        }

        .swiper-wrapper img {
            width: 100%;
        }

        .swiper-pagination{
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 60px;
            display: flex;
            flex-flow: row wrap;
            justify-content: center;
            align-content: center;
        }

        .hot{
            width: 30px;
            height: 30px;
            background-color: gold;
            border-radius: 50%;
            margin-right: 20px;
        }

        .hot-active{
            background-color: red;
        }


        .swiper-button-prev, .swiper-button-next {
            width: 60px;
            height: 60px;
            display: flex;
            flex-flow: row wrap;
            justify-content: center;
            align-content: center;
            cursor: pointer;
        }
        .swiper-button-prev {
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            display: flex;
            flex-flow: row wrap;
            align-content: center;
        }

        .swiper-button-next{
            position: absolute;
            right: 0;
            top: 0;
            height: 100%;
            display: flex;
            flex-flow: row wrap;
            align-content: center;
        }

        .icons-font{
            font-size: 60px;
            color: #000000;
        }
    </style>
</head>
<body>
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <img src="https://p.qpic.cn/dnfbbspic/0/dnfbbs_dnfbbs_dnf_gamebbs_qq_com_forum_201911_22_083548z4dn4295a5ej89ad.jpg/0"
                 alt="啊是都是"/>
        </div>
        <div class="swiper-slide">
            <img src="https://ae01.alicdn.com/kf/H711b7a26841042a2bd71525ae16a3f87p.jpg" alt="啊是都是"/>
        </div>

        <div class="swiper-slide">
            <img src="https://img-baofun.zhhainiao.com/fs/694d8ce6ed856ada966ad49990fdaeb9.jpg" alt="啊是都是"/>
        </div>

        <div class="swiper-slide">
            <img src="https://imgxz.bizhi3.com/cont/20220713/xndunp3xkkg.jpg" alt="啊是都是"/>
        </div>

        <div class="swiper-slide">
            <img src="https://ts1.cn.mm.bing.net/th/id/R-C.f2b0a53b118eaee6f66732339f71b7b6?rik=of9RVDaZQIKzgQ&riu=http%3a%2f%2fpic.qianye88.com%2fpic%2f0fb4d4b22f5a8b0da2fa2ade8572c263.jpg%3fimageMogr2%2fthumbnail%2fx300%2fquality%2f90!&ehk=dOLsbiuCpbTj05YVjDrNEsjEk04KDD1payufv7OTKDk%3d&risl=&pid=ImgRaw&r=0"
                 alt="啊是都是"/>
        </div>
    </div>


    <div class="swiper-pagination">
        <span class="hot hot-active"></span>
        <span class="hot"></span>
        <span class="hot"></span>
    </div>

    <div class="swiper-button-prev">
        <i class="iconfont icon-xiangzuojiantou icons-font"></i>
    </div>
    <div class="swiper-button-next">
        <i class="iconfont icon-xiangyoujiantou icons-font"></i>
    </div>
</div>
</body>
</html>
